<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/dayjs.min.js"></script>
    <link rel="stylesheet" href="../../plugins/element_UI/index.css">
    <script src="../../plugins/element_UI/index.js"></script>
</head>
<style>
    .el-table .warning-row {
        background: #F5DEB3;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .el-table .vip-row {
        background: #f9c855;
    }
</style>
<body>
<div id="app">
    <el-page-header @back="goBack" content="用户详情页面">
    </el-page-header>
    <div>  </div>
    <el-form ref="form" :model="patients" label-width="80px">
        <el-row type="fix" class="right-10">
            <el-col :span="8">
                <el-form-item label="姓名" prop="patName">
                    <el-input v-model="patients.patName" type="text"
                              show-word-limit :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="电话号码">
                    <el-input v-model="patients.patPhone" type="text"
                              show-word-limit :disabled="true"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="fix" class="right-10">
            <el-col :span="8">
                <el-form-item label="性别">
                    <el-radio disabled  v-model="patients.patSex+''" label="1">男</el-radio>
                    <el-radio disabled  v-model="patients.patSex+''" label="0">女</el-radio>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="用户类型">
                    <el-radio disabled  label="1" v-model="patients.patMemGrade">VIP</el-radio>
                    <el-radio disabled  label="0" v-model="patients.patMemGrade">普通</el-radio>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <el-divider>就诊人列表</el-divider>
    <template>
        <el-table
                :data="sufferTableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                :max-height="tableHeight"
                border
                ref="table"
                size="small">
            <el-table-column
                    fixed
                    prop="patName"
                    label="就诊人"
                    align="center"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="patSex"
                    label="性别"
                    :formatter="formatterSex"
                    align="center"
                    width="80">
            </el-table-column>

            <el-table-column
                    prop="patIdentityNum"
                    align="center"
                    label="身份证号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="patPhone"
                    align="center"
                    label="联系电话"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="sufferName"
                    align="center"
                    label="隶属账户"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="phoneWrapper"
                    align="center"
                    label="隶属账户电话"
                    width="180">
            </el-table-column>
        </el-table>
    </template>
    <el-divider>预约记录列表</el-divider>
    <template>
        <el-table
                :data="appTableData"
                style="width: 100%"
                :max-height="tableHeight"
                border
                ref="table"
                @current-change="handleCurrentChange"
                size="small">
            <el-table-column
                    fixed
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="patName"
                    label="就诊人"
                    align="center"
                    width="80">
                <template slot-scope="scope">
                    <span @click="aClick(scope.row)" class="f-blue">{{scope.row.patName}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sufferName"
                    label="隶属账户"
                    align="center"
                    width="120">
                <template slot-scope="scope">
                    <span @click.native.prevent="patientClick(scope.row)" class="f-blue">{{scope.row.sufferName}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="patSex"
                    label="性别"
                    align="center"
                    :formatter="formatterSex"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="patIdentityNum"
                    label="身份证"
                    align="center"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="联系电话"
                    align="center"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="createDate"
                    align="center"
                    label="预约时间"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="visitDate"
                    align="center"
                    label="就诊时间"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="appStatusWrapper"
                    label="预约状态"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="serialNumber"
                    align="center"
                    label="号源编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="timeStateWrapper"
                    align="center"
                    label="上下午"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="depName"
                    label="科室名称"
                    align="center"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="doctorName"
                    label="医生姓名"
                    align="center"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="binName"
                    label="挂号类型"
                    align="center"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="spName"
                    label="服务商"
                    align="center"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="hospitalIdWrapper"
                    label="医院名称"
                    align="center"
                    width="200">
            </el-table-column>
        </el-table>
    </template>
</div>

</body>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                sufferTableData: [],
                appTableData: [],
                hospitalId: JSON.parse(localStorage.getItem("user")).hospitalId,
                tableHeight: window.innerHeight - 80,
                status: 0,
                loading: false,
                currentUpRow: null,
                hospitals: [],
                departments: [],
                bindInfos: [],
                hospitals: '',
                patients: [],
                patId: '',
                formLabelWidth: '120px'
            }
        },
        methods: {
            resizeHandler() {
                this.tableHeight = window.innerHeight - 80
            },
            goBack() {
                location.href = `../patients/patients.html`
            },
            init: function () {
                let params = new URLSearchParams()
                params.append("id", this.patId)
                axios.get("http://" + window.location.host + '/pubPatients/select_by_primary_key?id=' + this.patId).then(res => {
                    this.patients = res.data.data;
                }).catch((e) => {
                    alert('获取数据失败');
                });

                axios.post("http://" + window.location.host + '/pubSufferer/select_list', {patId: this.patId}).then(res => {
                    this.sufferTableData = res.data.data;
                }).catch((e) => {
                    alert('获取数据失败');
                });

                axios.post("http://" + window.location.host + '/ordAppointment/select_list_wrapper', {sufferId: this.patId}).then(res => {
                    this.appTableData = res.data.data;
                }).catch((e) => {
                    alert('获取数据失败');
                });
            },
            handleCurrentChange(val) {
                // this.currentUpRow = val;
                // axios.get("http://"+window.location.host+'/ordAppointment/selectListByPatId?patId='+val.id).then(res => {
                //     this.appointmentList = res.data.data;
                //     if(res.data.data.length>0){
                //         this.appDialogTableVisible=true;
                //     }else {
                //         alert('暂无订单');
                //     }
                // }).catch((e) => {
                //     alert('暂无订单');
                // });
            },
            formatterHospital: function (row, column) {
                for (let i = 0; i < this.hospitals.length; i++) {
                    if (row.hospitalId == this.hospitals[i].id) {
                        return this.hospitals[i].hosName
                    }
                }
            },
            formatterSex: function (row, column) {
                if (row.patSex == 1 || row.patSex == '1') {
                    return "男"
                } else if (row.patSex == 0 || row.patSex == '0') {
                    return "女"
                } else {
                    return "其他"
                }
            },
            formatterSpName: function (row, column) {
                if (row.spName == 'jkt') {
                    return "健康通"
                } else if (row.spName == 'weixin') {
                    return "微信"
                } else if (row.spName == 'alipay') {
                    return "支付宝"
                } else if (row.spName == 'weibo') {
                    return "微博"
                } else if (row.spName == 'dy') {
                    return "抖音"
                } else {
                    return row.spName
                }
            },
            formatterAppStatus: function (row, column) {
                let appStatus = ""
                switch (row.appStatus) {
                    case 0:
                        appStatus = "预约";
                        break;
                    case 1:
                        appStatus = "过期未取号";
                        break;
                    case 2:
                        appStatus = "已取号";
                        break;
                    case 3:
                        appStatus = "患者取消";
                        break;
                    default:
                        appStatus = "未知";
                }
                return appStatus;
            },
            formatterTimeState: function (row, column) {
                let timeState = ""
                switch (row.timeState) {
                    case 0:
                        timeState = "上午";
                        break;
                    case 1:
                        timeState = "下午";
                        break;
                    case 2:
                        timeState = "夜门诊";
                        break;
                    default:
                        timeState = "未知";
                }
                return timeState;
            },
            editRow: function (index, row) {
                this.handleCurrentChange(row)
                this.ruleForm = row;
            },
            changeRow: function (index, row) {
                if (row.patMemGrade == null) {
                    row.patMemGrade = '0'
                }
                let patMemGrade = row.patMemGrade == '0' ? '1' : '0'
                axios.post("http://" + window.location.host + '/pubPatients/update_by_primary_key_selective',
                    {'id': row.id, 'patMemGrade': patMemGrade}
                ).then(res => {
                    this.init();
                })
            },
            //设置指定行、列、具体单元格颜色
            tableRowClassName({row, rowIndex}) {
                if (row.status == "1" || row.status == 1) {
                    if (row.patMemGrade == "1" || row.patMemGrade == 1) { //指定坐标rowIndex ：行，columnIndex ：列
                        return 'success-row';
                    } else {
                        return 'warning-row';
                    }
                } else {
                    if (row.patMemGrade == "1" || row.patMemGrade == 1) { //指定坐标rowIndex ：行，columnIndex ：列
                        return 'vip-row';
                    } else {
                        return ''
                    }
                }
            },
            getPageParam(param) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == param) {
                        return pair[1];
                    }
                }
                return '';
            },
            //预约状态(0已预约 1已过期 2已取号 3患者取消 4医生停诊 5后台取消)
            chrildTableRowClassName({row, rowIndex}) {
                console.log(row)
                if (row.appStatus == 1 || row.appStatus == '1') {
                    return 'warning-row';
                } else if (row.appStatus == 2 || row.appStatus == '2') {
                    return 'success-row';
                } else if (row.appStatus == 3 || row.appStatus == '3') {
                    return 'vip-row';
                } else if (row.appStatus == 4 || row.appStatus == '4') {
                    return '';
                }
            }
        },
        created() {
            this.patId = this.getPageParam("patId")
            this.init()
        },
        mounted() {
        }
    });
</script>
</html>